<?php if(!empty($Producto['imagenes'])) { ?>
	<link rel="stylesheet" href="<?php echo URL;?>/js/flexslider/flexslider.css" type="text/css" media="screen" />
	<script defer src="<?php echo URL;?>/js/flexslider/jquery.flexslider.js"></script>

        <div id="slider" class="flexslider">
			<ul class="slides">
			<?php foreach($Producto['imagenes'] as $clave=>$im){ ?>
				<li style='height:450px !important; max-height:450px !important; overflow:hidden'>			
					<img src="<?php echo VER_FOTOS.'/'.$Producto['id'].'/'.$im['imagen'];?>" style='width:860px;' 
						alt='<?php echo $DatosEmpresa['nombre_empresa'];?> - <?php echo $Producto['titulo'];?> en <?php echo $Producto['fam_nombre'];?> - <?php echo $clave;?>'
						title='<?php echo $Producto['titulo'];?> en <?php echo $Producto['fam_nombre'];?> - <?php echo $clave;?>'
					>
				</li>	
			<?php } ?>
			</ul>
		</div>
		
        <div id="carousel" class="flexslider">
          <ul class="slides">
			<?php foreach($Producto['imagenes'] as $clave=>$im){ ?>
				<li style='margin-right:5px;cursor:pointer;'>			
					<img src="<?php echo VER_FOTOS.'/'.$Producto['id'].'/tn_'.$im['imagen'];?>" 
						alt='<?php echo $Producto['titulo'];?> - <?php echo $clave;?>'
						title='<?php echo $Producto['titulo'];?> - <?php echo $clave;?>'
					>
				</li>	
			<?php } ?>
			</ul>
		</div>

  <script type="text/javascript">
    $(window).load(function(){
      $('#carousel').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 50,
        itemMargin: 0,
        asNavFor: '#slider'
      });

      $('#slider').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: "#carousel",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>
	
<?php } ?>